<script setup>
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet/css/index'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'

import iServerConfigUrl from '/iServerConfig.json?url'

import { ElMessage } from 'element-plus'
import $ from 'jquery'

import L from 'leaflet'
import 'leaflet.markercluster'
import '@supermap/iclient-leaflet'
import 'proj4leaflet'

import { inject } from 'vue'
import axios from 'axios'
</script>

<template></template>

<script>
export default {
    name: 'MarkerCluster',
    data() {
        return {
            CRS_4490: undefined,
            restMapUrl: undefined,
            restLayer: undefined,
            restDataUrl: undefined,
            datasourceName: 'dy',
            datasetName: 'POI'
        }
    },
    mounted() {
        var map = inject('map');

        axios.get(iServerConfigUrl).then(res => {
            var iServerConfig = res.data;
            this.restMapUrl = `${iServerConfig.urls.MarkerCluster.protocol}://${iServerConfig.urls.MarkerCluster.hostname}:${iServerConfig.urls.MarkerCluster.port}/${iServerConfig.urls.MarkerCluster.restMapUrl}`;
            this.restDataUrl = `${iServerConfig.urls.MarkerCluster.protocol}://${iServerConfig.urls.MarkerCluster.hostname}:${iServerConfig.urls.MarkerCluster.port}/${iServerConfig.urls.MarkerCluster.restDataUrl}`;

            // 还原 map 显示范围
            if (map._size.x !== document.body.clientWidth) {
                $("#map")[0].style.width = '';
                map._size.x = document.body.clientWidth;
            }

            // 定义 4490 坐标系
            var CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
                resolutions: [
                    0.04373046874998992,
                    0.02186523437499496,
                    0.01093261718749748,
                    0.00546630859374874,
                    0.00273315429687437,
                    0.001366577148437185,
                    0.0006832885742185925,
                    0.00034164428710929624,
                    0.00017082214355464812,
                    0.00008541107177732406,
                    0.00004270553588866203,
                    0.000021352767944331015,
                    0.000010676383972165508,
                    0.000005338191986082754,
                    0.000002669095993041377,
                    0.0000013345479965206884,
                    0.0000006672739982603442
                ],
                origin: [97.347425, 34.31465000089267]
            });
            map.options.crs = CRS_4490;
            map.options.maxZoom = 8;
            map.flyTo([31.12, 104.48], 4);

            // 添加底图
            this.restLayer = new L.supermap.tiledMapLayer(this.restMapUrl);
            map.addLayer(this.restLayer);

            // 加载聚点图
            this.loadMarkerCluster(map);
        }).catch(err => {
            ElMessage.error(err.stack);
        });
    },
    methods: {
        loadMarkerCluster(map) {
            var clusterLayer = new L.markerClusterGroup({
                spiderfyOnMaxZoom: true,
                showCoverageOnHover: false,
                zoomToBoundsOnClick: true,
                maxClusterRadius: 36
            });
            map.addLayer(clusterLayer);

            var featuresBySQLParams = new L.supermap.GetFeaturesBySQLParameters({
                queryParameter: new L.supermap.FilterParameter({
                    name: `${this.datasetName}@${this.datasourceName}`,
                    attributeFilter: '第一类 == 2',
                }),
                toIndex: -1,
                maxFeatures: 200,
                datasetNames: [`${this.datasourceName}:${this.datasetName}`]
            });

            new L.supermap.FeatureService(this.restDataUrl).getFeaturesBySQL(featuresBySQLParams, function (serviceResult) {
                var features = serviceResult.result.features;
                if (!features || !features.features || features.features.length < 1) {
                    return;
                }
                features.features.map((feature) => {
                    var latLng = map.options.crs.unproject(L.point(feature.geometry.coordinates));
                    var marker = new L.marker(latLng);
                    var props = '';
                    var properties = feature.properties;
                    if (properties !== undefined) {
                        for (let key in properties) {
                            var value = properties[key];
                            if (value.length > 0) {
                                props += `${key}: ${properties[key]}<br />`;
                            }
                        }
                        if (props.length === 0) {
                            props = '属性为空';
                        }
                        marker.bindPopup(props, {
                            autoClose: false,
                            closeButton: false
                        });
                    }
                    clusterLayer.addLayer(marker);
                });
            });
        }
    }
}
</script>

<style scoped></style>